使用rem配置PC端自适应大屏 |
您所在的位置：网站首页 › 网页自适应怎么实现 rem › 使用rem配置PC端自适应大屏 |
使用rem配置PC端自适应大屏
|
效果如下
使得大屏不论在什么宽高比例依然能展示全部数据
原先的rem函数是能解决大部分的问题的，如果展示不全，也可以用滚动条。 但是大屏展示又不能使用滚动条，又必须展示全部的内容，这个时候就需要改变原来的计算方式，需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件rem.js可以放在src文件夹下，我是放在src下的utils文件夹中 初始的rem配置 // 设置 rem 函数 function setRem () { // PC端 console.log('非移动设备') // 基准大小 baseSize = 100; let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值 let vW = window.innerWidth; // 当前窗口的宽度 let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值 document.documentElement.style.fontSize = rem + "px"; } // 初始化 setRem(); // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }; 修改后的rem配置 // 设置 rem 函数 function setRem () { // PC端 console.log('非移动设备') // 基准大小 baseSize = 100; let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值 let vW = window.innerWidth; // 当前窗口的宽度 let vH = window.innerHeight; // 当前窗口的高度 // 非正常屏幕下的尺寸换算 let dueH = vW * 1080 / 1920 if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度 vW = vH * 1920 /1080 } let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值 document.documentElement.style.fontSize = rem + "px"; } // 初始化 setRem(); // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }; 2. postcss-pxtorem配置postcss的配置项 rootValue: 100, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 propList: ["*"] //可以从px更改到rem的属性,值需要精确匹配。 // 1.使用通配符 * 启用所有属性。 示例：['*'] // 2.在单词的开头或者结尾使用 *。 ( ['*position*'] 将匹配 background-position-y ) // 3.使用 与属性不匹配。! 示例：['*','letter-spacing']! // 4.将"非"前缀与其他前缀合并。 示例：['*','font*']! unitPrecision: 5, //允许REM单位增长到的十进制数字。 propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。 propBlackList: [], //黑名单 exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值 selectorBlackList: [], //要忽略并保留为px的选择器 ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。 replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。 mediaQuery: false, //（布尔值）允许在媒体查询中转换px。 minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0主要使用了两个配置项，我的配置如下 { "name": "", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "animate.css": "^3.7.2", "echarts": "^4.2.1", "element-ui": "^2.11.1", "node-sass": "^4.13.1", "nprogress": "^0.2.0", "scss": "^0.2.4", "scss-loader": "0.0.1", "v-charts": "^1.19.0", "vue": "^2.6.10", "vue-router": "^3.0.6", "vuex": "^3.1.1", }, "devDependencies": { "@vue/cli-plugin-babel": "^3.7.0", "@vue/cli-plugin-eslint": "^3.7.0", "@vue/cli-service": "^3.7.0", "axios": "^0.18.0", "babel-eslint": "^10.0.1", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-remove-console": "^6.9.4", "compression-webpack-plugin": "^3.1.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.2.2", "lib-flexible": "^0.3.2", "postcss-pxtorem": "^4.0.1", "pug": "^2.0.3", "pug-plain-loader": "^1.0.0", "px2rem-loader": "^0.1.9", "sass-loader": "^7.3.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue-cli-plugin-element": "^1.0.1", "vue-particles": "^1.0.9", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 100, // 必须要和rem.js内容中的baseSize一样 "propList": [ "*" ] } } }, "browserslist": [ "> 1%", "last 2 versions", "not ie |
【本文地址】